<template>
	<hx-navbar title="订单物流"></hx-navbar>
	<view class="logistics-container">
		<view class="logistics-warp">
			<view class="item">
				<view class="title"> 物流公司 </view>
				<view class="desc"> {{ state.logistics.logisticsName }} </view>
			</view>
			<view class="item">
				<view class="title"> 物流单号 </view>
				<view class="desc" style="display: flex; align-items: center; justify-content: center">
					<view>
						{{ state.logistics.logisticsNo }}
					</view>
					<u-button size="mini" type="primary" @click="copy(state.logistics.logisticsNo)">复制</u-button>
				</view>
			</view>
			<view class="item">
				<view class="title"> 收货地址 </view>
				<view class="desc"> {{ state.logistics.detailAddress }} </view>
			</view>
			<view class="item">
				<view class="title"> 物流状态 </view>
				<view class="desc"> {{ state.logistics.stateDesc }} </view>
			</view>
		</view>
		<view> 物流信息 </view>
		<u-read-more
			show-height="250"
			:toggle="true"
			close-text="查看完整物流信息"
			v-if="state.logistics.orderLogisticsDetailList && state.logistics.orderLogisticsDetailList.length > 0"
		>
			<view class="u-padding-10">
				<u-time-line style="padding-left: 0rpx !important">
					<u-time-line-item node-top="10" v-for="(item, index) in state.logistics.orderLogisticsDetailList">
						<template v-slot:content>
							<view :style="{ color: index == 0 ? '#18b566' : '' }" class="u-order-desc">{{ item.logisticsContext }}</view>
							<view :style="{ color: index == 0 ? '#18b566' : '' }" class="u-order-time">{{ item.logisticsTime }}</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</u-read-more>
		<u-empty v-else text="暂无物流信息" mode="list"></u-empty>
	</view>
</template>

<script setup lang="ts">
import { getById } from '@/api/order/logistics';
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const state = reactive<{ logistics: any }>({
	logistics: {},
});

onLoad((options) => {
	getLogistics(options?.id);
});

const getLogistics = (id: string) => {
	getById(id).then((response) => {
		state.logistics = response.data;
	});
};
const copy = (logisticsNo: string) => {
	uni.setClipboardData({
		data: logisticsNo,
		success: function () {},
	});
};
</script>

<style lang="scss">
.logistics-container {
	padding: 20rpx;
	background-color: #ffffff;
	.logistics-warp {
		.item {
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;
			justify-content: space-between;
			.title {
			}
			.desc {
			}
		}
	}
}

.u-order-desc {
	color: rgb(150, 150, 150);
	font-size: 28rpx;
	margin-bottom: 6rpx;
}

.u-order-time {
	color: rgb(200, 200, 200);
	font-size: 26rpx;
}
</style>
